<template>
  <div class="cp" v-loading="state.loading">
    <a-flex gap="middle" style="height: 100%; margin-top: 12px" wrap="wrap">
      <card-item :data-source="state?.cardAllPack" @detail="onDetail" />
    </a-flex>
    <!-- <div v-for="(item, index) in combinedArray" :key="index">
        <template v-if="item.expireFlag == 1">
          <div v-if="state.showInvalid" class="invalid" @click="state.showInvalid=false">收起已失效权益
            <CaretUpOutlined/>
          </div>
          <div v-else class="invalid" @click="state.showInvalid=true">展开已失效权益
            <CaretDownOutlined/>
          </div>
        </template>
    </div> -->

    <template v-if="!!state.cardInvalidPack.length">
      <div v-if="state.showInvalid" class="invalid" @click="state.showInvalid = false"
        >收起已失效权益<CaretUpOutlined />
      </div>
      <div v-else class="invalid" @click="state.showInvalid = true"
        >展开已失效权益<CaretDownOutlined />
      </div>
    </template>

    <Detail @register="registerDetail" @complete="loadData" />
  </div>
</template>

<script setup>
  import { defineOptions, onMounted, reactive, watch, computed } from 'vue';

  import { useMessage } from '@/hooks/web/useMessage';
  import { useDrawer } from '@/components/Drawer';

  import Detail from './card-detail.vue';

  import { PAGE } from '@/api/http.js';
  import { exist } from '@/api/util.js';
  import CardItem from './card-item.vue';

  import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons-vue';

  const [registerDetail, { openDrawer: detailDrawer }] = useDrawer();

  defineOptions({ name: 'MemberCardLog' });

  const props = defineProps({
    memberCode: {
      type: String,
    },
  });

  const { createMessage } = useMessage();

  const state = reactive({
    dataSource: [],
    cardTimesPack: [],
    cardMoneyPack: [],
    cardEffectivePack: [],
    cardInvalidPack: [],
    cardAllPack: [],
    showInvalid: false,
    version: 0,
    loading: false,
  });

  onMounted(() => {
    loadData();
  });

  watch(
    () => [state.showInvalid, state.version],
    () => {
      const { showInvalid, cardEffectivePack, cardInvalidPack } = state;
      state.cardAllPack = showInvalid
        ? [...cardEffectivePack, ...cardInvalidPack]
        : [...cardEffectivePack];
    },
  );

  const combinedArray = computed(() => {
    return state.cardTimesPack.concat(state.cardMoneyPack);
  });

  async function loadData() {
    const { memberCode } = props;

    try {
      state.loading = true;

      const { list } = await PAGE('/card/getUserCardList')({
        memberCode,
        currentPage: 1,
        pageSize: 10,
      });

      const { cardTimesPack, cardMoneyPack } = list?.[0] ?? {};

      state.cardTimesPack = cardTimesPack || [];
      state.cardMoneyPack = cardMoneyPack || [];
      state.cardEffectivePack = getCardList([1, 2]);
      state.cardInvalidPack = getCardList([3]);

      state.version = Math.random();
    } finally {
      state.loading = false;
    }
  }

  function getCardList(statusList) {
    const result = [];

    result.push(...state.cardTimesPack.filter((o) => exist(o.status, statusList)));
    result.push(...state.cardMoneyPack.filter((o) => exist(o.status, statusList)));

    return result;
  }

  function onDetail(record) {
    const { memberCode } = props;
    detailDrawer(true, { memberCode, record });
  }
</script>
<style lang="less" scoped>
  .cp {
    padding: 12px 24px;

    .invalid {
      cursor: pointer;
      font-weight: 400;
      font-size: 14px;
      text-align: right;
      color: #666;
      padding: 24px 0;
    }
  }
</style>
